<template>
  <div class="recharge-container ptop bgwhite">
    <m-header title="充值">
      <span class="header-right" slot="right" @click="$router.push({ path: '/mine/rechargerecord' })">查询</span>
    </m-header>
    <div class="money-select">
      <div class="label">充值金额</div>
      <div class="input-wrapper">
        <input type="number" placeholder="充值金额至少20元" v-model="price"/>
        <img src="../../../assets/imgs/mine/¥@2x.png" alt="">
      </div>
      <div class="money-select-wrapper">
        <div :key="index" @click="price=item.value" :class="price === item.value?'active':''" v-for="(item, index) in moenyList">{{item.label}}</div>
      </div>
    </div>
    <div class="method-select">
      <div class="label">支付方式</div>
      <div class="method-select-wrapper">
        <div :key="index" @click="selectedMethod=item.value" v-for="(item, index) in methodList" >
          <img :src="item.src" alt="" class="logo">
          {{item.label}}
          <img v-if="selectedMethod===item.value" src="../../../assets/imgs/mine/icon-select@2x.png" alt="" class="selected">
          </div>
      </div>
    </div>
    <div class="button-wrapper">
      <div @click="doRecharge" class="btn">确定</div>
    </div>
    <toast v-model="showAlert" type="text" :time="800" text="充值金额不能少于20元"></toast>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
import { Toast } from 'vux';

export default {
  components: {
    Toast
  },
  data () {
    return {
      showPasswd: false,
      showAlert: false,
      moenyList: [
        {value: 20, label: '20'},
        {value: 50, label: '50'},
        {value: 100, label: '100'},
        {value: 200, label: '200'},
        {value: 500, label: '500'},
        {value: 1000, label: '1000'}
      ],
      price: 20,
      methodList: [
        {value: '2', label: '微信支付', src: require('../../../assets/imgs/mine/wechat@2x.png')},
        {value: '1', label: '支付宝', src: require('../../../assets/imgs/mine/zhifubao@2x.png')},
        {value: '3', label: '银行卡', src: require('../../../assets/imgs/mine/yinlian@2x.png')}
      ],
      selectedMethod: '2'
    }
  },
  methods: {
    ...mapActions({
      recharge: 'mine/recharge'
    }),
    doRecharge () {
      if (this.price && Number(this.price) < 20) {
        this.showAlert = true;
        return;
      }
      const body = {
        type: this.selectedMethod,
        price: this.price || this.price
      }
      // console.log(body)
      // this.$router.push({ name: 'RechargeConfirm', params: body });
      this.recharge(body).then(res => {
        if (res) {
          console.log('success');
          this.$router.push({ name: 'RechargeConfirm', params: body });
        }
      });
    }
  }
}
</script>
<style lang="less">
  .recharge-container {
    // padding-top: 0.92rem;
    // padding-bottom: 0.2rem;
    // background: #f7f7f7;
    .header-right {
      color: #ffffff;
      font-size: 0.3rem;
    }
    .money-select {
      margin: 0.3rem 0.3rem 0.2rem 0.3rem;
      .label {
        color: #666666;
        font-size: 0.26rem;
      }
      .input-wrapper {
        margin-top: 0.13rem;
        border: 0.01rem solid #D2D2D2;
        position: relative;
        height: 0.8rem;
        line-height: 0.8rem;
        padding-left: 0.78rem;
        input {
          // background: #f7f7f7;
          // height: 0.6rem;
          // width: 4rem;
          width: 100%;
          height: 100%;
          border-radius: 0.06rem;
          &::-webkit-input-placeholder {
            // font-size: 0.24rem;
            color: #999999;
          }
        }
        img {
          position: absolute;
          left: 0.2rem;
          // top: 0.16rem;
          top: 0.2rem;
          width: 0.2rem;
          height: 0.48rem;
        }
      }
      .money-select-wrapper {
        div {
          display: inline-block;
          width: 30%;
          height: 0.8rem;
          line-height: 0.8rem;
          margin-top: 0.2rem;
          border: 0.01rem solid #D2D2D2;
          color: #D44743;
          font-size: 0.3rem;
          text-align: center;
          border-radius: 0.06rem;
          &.active {
            border: 0.01rem solid #D2D2D2;
            color: #ffffff;
            background: #D44743;
          }
          &:nth-child(3n-1) {
            margin-left: 3%;
            margin-right: 3%;
          }
        }
      }
    }
    .method-select {
      margin: 0 0.2rem;
      .label {
        color: #666666;
        font-size: 0.26rem;
      }
      .method-select-wrapper {
        margin-top: 0.13rem;
        div {
          position: relative;
          height: 1.4rem;
          line-height: 1.4rem;
          padding-left: 0.3rem;
          border-top: 0.01rem solid #D2D2D2;
          .logo {
            width: 1rem;
          }
          .selected {
            width: 0.44rem;
            position: absolute;
            right: 0.6rem;
            top: 0.48rem;
          }
          &:nth-child(3) {
            border-bottom: 0.01rem solid #D2D2D2;
          }
        }
      }
    }
    .button-wrapper {
        margin-top: 0.6rem;
        padding: 0 0.26rem;
        .btn {
            text-align: center;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.34rem;
            color: #ffffff;
            background: #D44743;
            cursor: pointer;
            border-radius: 0.06rem;
        }
    }
  }
</style>
